<!--
  使用方法：
  1. html:
    <ImageCropper
        :auto-crop-width="400"
        :auto-crop-height="600"
        output-file-type="File"
        :fixed-box="false"
        @imageCropperCallback="imageCropperCallback"/>
    </template>
  2.js:
    import ImageCropper from '@/views/components/imageCropper'

    // 图片截取后的回调函数：返回值根据 outputFileType决定，可能是 File、Blob、Base64
    imageCropperCallback(file){
      debugger
    }
-->
<template>
  <div>
    <div class="cropper-container">
      <div class="cropper-content">
        <div class="cropper">
          <!--
                    文档地址：
                      https://www.npmjs.com/package/vue-cropper/v/0.4.7
                    参数：
                      img	裁剪图片的地址	空	url 地址 || base64 || blob
                      outputSize	裁剪生成图片的质量	1	0.1 - 1
                      outputType	裁剪生成图片的格式	jpg (jpg 需要传入jpeg)	jpeg || png || webp
                      info	裁剪框的大小信息	true	true || false
                      canScale	图片是否允许滚轮缩放	true	true || false
                      autoCrop	是否默认生成截图框	false	true || false
                      autoCropWidth	默认生成截图框宽度	容器的80%	0~max
                      autoCropHeight	默认生成截图框高度	容器的80%	0~max
                      fixed	是否开启截图框宽高固定比例	true	true | false
                      fixedNumber	截图框的宽高比例	[1, 1]	[宽度, 高度]
                      full	是否输出原图比例的截图	false	true | false
                      fixedBox	固定截图框大小 不允许改变	false	true | false
                      canMove	上传图片是否可以移动	true	true | false
                      canMoveBox	截图框能否拖动	true	true | false
                      original	上传图片按照原始比例渲染	false	true | false
                      centerBox	截图框是否被限制在图片里面	false	true | false
                      high	是否按照设备的dpr 输出等比例图片	true	true | false
                      infoTrue	true 为展示真实输出图片宽高 false 展示看到的截图框宽高	false	true | false
                      maxImgSize	限制图片最大宽度和高度	2000	0-max
                      enlarge	图片根据截图框输出比例倍数	1	0-max(建议不要太大不然会卡死的呢)
                      mode	图片默认渲染方式	contain	contain , cover, 100px, 100% auto

                    内置方法：
                      this.$refs.cropper.startCrop() 开始截图
                      this.$refs.cropper.stopCrop() 停止截图
                      this.$refs.cropper.clearCrop() 清除截图
                      this.$refs.cropper.changeScale() 修改图片大小 正数为变大 负数变小
                      this.$refs.cropper.getImgAxis() 获取图片基于容器的坐标点
                      this.$refs.cropper.getCropAxis() 获取截图框基于容器的坐标点
                      this.$refs.cropper.goAutoCrop 自动生成截图框函数
                      this.$refs.cropper.rotateRight() 向右边旋转90度
                      this.$refs.cropper.rotateLeft() 向左边旋转90度
                      图片加载的回调 imgLoad 返回结果success, error
                    -->
          <VueCropper
            ref="cropper"
            :img="option.img"
            :output-size="option.size"
            :output-type="option.outputType"
            :info="true"
            :can-move="option.canMove"
            :can-move-box="option.canMoveBox"
            :auto-crop="option.autoCrop"
            :fixed="option.fixed"
            :fixed-number="option.fixedNumber"
            :auto-crop-width="autoCropWidth"
            :auto-crop-height="autoCropHeight"
            :center-box="centerBox"
            :info-true="infoTrue"
            :original="original"
            :fixed-box="fixedBox"
            :full="full"
            @realTime="realTime"
            @imgLoad="imgLoad"
          />
        </div>
        <div class="cropper-tools">
          <el-row>
            <el-tooltip
              class="item"
              effect="dark"
              content="选择图片"
              placement="top-start"
            >
              <label
                class="el-button el-button--info el-button--mini"
                style="margin-right: 10px;"
                for="uploads"
                title="选择图片"
              >
                <i class="el-icon-camera-solid" />
              </label>
            </el-tooltip>

            <input
              id="uploads"
              type="file"
              :value="imgFile"
              style="position:absolute; clip:rect(0 0 0 0);"
              accept="image/png, image/jpeg, image/gif, image/jpg"
              @change="uploadImg($event, 1)"
            >
            <el-tooltip
              class="item"
              effect="dark"
              content="向左旋转"
              placement="top-start"
            >
              <el-button
                type="info"
                size="mini"
                icon="el-icon-refresh-left"
                title="向左旋转"
                @click="rotateLeft"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="向右旋转"
              placement="top-start"
            >
              <el-button
                type="info"
                size="mini"
                icon="el-icon-refresh-right"
                title="向右旋转"
                @click="rotateRight"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="下载"
              placement="top-start"
            >
              <el-button
                type="info"
                size="mini"
                icon="el-icon-download"
                title="下载"
                @click="down('blob')"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="上传"
              placement="top-start"
            >
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-upload2"
                title="上传"
                @click="finish()"
              />
            </el-tooltip>
          </el-row>
        </div>
      </div>
      <div class="cropper-preview">
        <!--        <div-->
        <!--          class="show-preview"-->
        <!--          :style="{'width': autoCropWidth+'px', 'height':autoCropHeight+'px', 'overflow': 'hidden', 'margin': '5px'}"-->
        <!--        >-->
        <div
          class="show-preview"
          :style="{'width': 'auto', 'height': 'auto', 'overflow': 'hidden', 'margin': '5px'}"
        >
          <div :style="previews.div" :class="shape" class="preview">
            <img :src="previews.url" :style="previews.img">
          </div>
        </div>
      </div>
    </div>
    <el-row style="margin-top: 40px;">
      <el-col :span="24">
        <i style="color: orange;" class="el-icon-guide" />
        <span style="font-size: 15px;font-weight: bold;">头像修改说明</span>
      </el-col>
      <el-col :span="24" style="color: #858585;margin-top: 10px;">
        1.点击<span
          class="el-button el-button--primary el-button--mini"
          style="margin-right: 10px;"
        >
          <i class="el-icon-camera-solid" />
        </span>选择图片。
      </el-col>
      <el-col :span="24" style="color: #858585;margin-top: 10px;">
        2.头像编辑完后，点击“上传”按钮 。
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-upload2"
        />
        ，完成头像上传。
      </el-col>
      <el-col :span="24" style="color: #858585;margin-top: 10px;">
        3.点击确定按钮，提交头像数据，完成修改头像操作。
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper'

export default {
  name: 'ImageCropper',
  components: {
    VueCropper
  },
  props: {
    // 预览宽度，截图区域宽度公用
    autoCropWidth: {
      default: 100,
      type: Number
    },
    // 预览高度，截图区域高度公用
    autoCropHeight: {
      default: 150,
      type: Number
    },
    // 截图框是否被限制在图片里面
    centerBox: {
      default: true,
      type: Boolean
    },
    // 为展示真实输出图片宽高
    infoTrue: {
      default: true,
      type: Boolean
    },
    // 上传图片按照原始比例渲染
    original: {
      default: false,
      type: Boolean
    },
    // 是否输出原图比例的截图
    full: {
      default: true,
      type: Boolean
    },
    // 固定截图框大小 不允许改变
    fixedBox: {
      default: true,
      type: Boolean
    },
    fixed: {
      default: true,
      type: Boolean
    },
    shape: {
      default: 'square',
      type: String
    },
    /**
       * @param 输出文件的类型
       * @desc blob、 base64、 File 三类值
       */
    outputFileType: {
      default: 'File',
      type: String
    }
  },
  data() {
    return {
      // 剪切图片上传
      crap: false,
      previews: {},
      option: {
        img: '',
        outputSize: 1, // 剪切后的图片质量（0.1-1）
        outputType: 'png',
        canMove: true,
        canMoveBox: true,
        autoCrop: true,
        fixed: false,
        fixedNumber: [1, 1]
      },
      fileName: '', // 本机文件地址
      downImg: '#',
      imgFile: '',
      globalImg: {
        file: null,
        path: ''
      }
    }
  },
  created() {
    // 固定截图框大小允许改变时，
    // 1.要限定截图款的宽高比：这个宽/高 来自 autoCropWidth和autoCropHeight
    // if (!this.fixedBox) {
    //   this.fixed = true
    //   this.option.fixedNumber = [1, this.autoCropHeight / this.autoCropWidth]
    // }
  },

  methods: {
    // 放大/缩小
    changeScale(num) {
      num = num || 1
      this.$refs.cropper.changeScale(num)
    },
    // 坐旋转
    rotateLeft() {
      this.$refs.cropper.rotateLeft()
    },
    // 右旋转
    rotateRight() {
      this.$refs.cropper.rotateRight()
    },
    // 上传图片（点击上传按钮）
    finish() {
      const type = this.outputFileType
      // 输出
      if (type === 'blob') {
        this.$refs.cropper.getCropBlob((data) => {
          const img = window.URL.createObjectURL(data)
          this.$emit('imageCropperCallback', img)
        })
      } else if (type === 'base64') {
        this.$refs.cropper.getCropData((data) => {
          this.$emit('imageCropperCallback', this.data, this.globalImg.file)
        })
      } else {
        this.$refs.cropper.getCropBlob((data) => {
          const file = new window.File([data], data.type.replace(/(\w+)(\/{1})(\w+)/gi, '$3'), { type: data.type })
          this.$emit('imageCropperCallback', file, this.option.img, this.globalImg.file)
        })
      }
    },
    // 实时预览函数
    realTime(data) {
      this.previews = data
    },
    // 下载图片
    down(type) {
      var aLink = document.createElement('a')
      aLink.download = 'author-img'
      if (type === 'blob') {
        this.$refs.cropper.getCropBlob((data) => {
          this.downImg = window.URL.createObjectURL(data)
          aLink.href = window.URL.createObjectURL(data)
          aLink.click()
        })
      } else {
        this.$refs.cropper.getCropData((data) => {
          this.downImg = data
          aLink.href = data
          aLink.click()
        })
      }
    },
    // 选择本地图片
    uploadImg(e, num) {
      var _this = this
      // 上传图片
      var file = e.target.files[0]
      this.globalImg.file = file
      _this.fileName = file.name
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
        return false
      }
      var reader = new FileReader()
      reader.onload = (e) => {
        let data
        if (typeof e.target.result === 'object') {
          // 把Array Buffer转化为blob 如果是base64不需要
          data = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          data = e.target.result
        }
        if (num === 1) {
          _this.option.img = data
        } else if (num === 2) {
          _this.example2.img = data
        }
      }
      // 转化为base64
      // reader.readAsDataURL(file)
      // 转化为blob
      reader.readAsArrayBuffer(file)
    },
    imgLoad(msg) {

    }
  }

}
</script>

<style lang="scss" scoped>
    .cropper-container {
        width: 600px;
        display: flex;
      // 截图
      .cropper-content {
        .cropper {
          width: auto;
          height: 300px;
        }
      }
        .cropper-content {
            flex: 1;

            .cropper {
                width: auto;
                height: 300px;
            }

            .cropper-tools {
                padding-top: 10px;
            }
        }

        .cropper-preview {
            flex: 1;

            .preview {
                overflow: hidden;
            }

            .circle {
                border-radius: 50%;
            }
        }
    }
</style>
